<template>
  <!-- 1、创建DOM -->
  <p @click="videoSurveillance">视频监控</p>
  <div id="jkpopup" class="ol-popup">
    <a href="#" id="popup-closer-vs" class="ol-popup-closer"
      ><el-icon><CloseBold /></el-icon
    ></a>
    <div id="jkpopup-content">
      <div class="pop-up" v-if="event_value">
        <h3>摄像头: {{ event_value["编号"] }}</h3>
        <p>{{ event_value["位置"] }}</p>
        <video
          src="../../assets/image/监控视频.mp4"
          controls
          autoplay
          muted
        ></video>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Query } from "../../utils/Query";

let $map = null;
let $docLayer = null;
let features = null;
/* 获取地图文档 */
let service = {
  name: "guanggu",
  layerId: 3,
};
const success = (data) => {
  //初始化Zondy.Format.PolygonJSON类
  let format = new Zondy.Format.PolygonJSON();
  //将MapGIS要素JSON反序列化为ol.Feature类型数组
  features = format.read(data);
  // console.log(features, 222);
};
Query.queryByLayer({
  service,
  success,
});

// 数据源
let source = new ol.source.Vector({});
// 通过Style类创建icon 【图片标注的样式】
const icon = new ol.style.Style({
  /**{olx.style.IconOptions}类型*/
  image: new ol.style.Icon({
    // 0.5 1 // x轴在中心 // y轴在底部
    anchor: [0.5, 40],
    anchorOrigin: "top-right",
    anchorXUnits: "fraction",
    anchorYUnits: "pixels",
    offsetOrigin: "top-right",
    // offset:[0,10],
    //图标缩放比例
    scale: 0.15,
    //透明度
    opacity: 1,
    //图标的url
    // src: "/src/assets/image/监控摄像头.png",
    src: "/src/assets/image/视频监控.png",
  }),
});
/* 高亮图层 */
let highLightLayer = new ol.layer.Vector({
  source,
  style: icon,
});

// 每次点击事件要素时得到的事件信息对象
const event_value = ref(null);
// popup图层
let popup = null;

onMounted(() => {
  $map = inject("$map");
  $docLayer = inject("$docLayer");

  // 获取DOM：实现popup的html元素
  let container = document.getElementById("jkpopup");
  let content = document.getElementById("jkpopup-content");
  let closer = document.getElementById("popup-closer-vs");
  // 在地图容器中创建一个Overlay
  popup = new ol.Overlay(
    /** @type {olx.OverlayOptions} */
    ({
      //要转换成overlay的HTML元素
      element: container,
      //当前窗口可见
      autoPan: true,
      //Popup放置的位置
      positioning: "bottom-center",
      //是否应该停止事件传播到地图窗口
      stopEvent: true,
      // stopEvent: false,
      autoPanAnimation: {
        //当Popup超出地图边界时，为了Popup全部可见，地图移动的速度
        duration: 250,
      },
    })
  );
  // console.log(popup);
  // 设置 popup 图层的层级
  // popup.set("zIndex", 10000);  // 设置层级为 100
  // 添加popup图层
  $map.addOverlay(popup);

  // // 鼠标移动到要素上,显示抓手
  $map.on("pointermove", function (e) {
    let pixel = $map.getEventPixel(e.originalEvent);
    let hit = $map.hasFeatureAtPixel(pixel);
    $map.getTargetElement().style.cursor = hit ? "pointer" : "";
  });
  // 点击要素,获取要素点的位置,将popup显示到对应位置
  $map.on("click", function (evt) {
    //判断当前单击处是否有要素，捕获到要素时弹出popup
    let feature = $map.forEachFeatureAtPixel(
      evt.pixel,
      function (feature, layer) {
        return feature;
      }
    );
    // 没有feature就直接退出
    if (!feature) return;

    // 判断点击的要素是否处在视频监控高亮图层上（是不是视频监控高亮图层的要素）
    if (!highLightLayer.getSource().getFeatures().includes(feature)) {
      // 如果不在，就return
      return;
    }
    //每次点击其他的要素前，先关闭之前的弹框，// 即修改为未定义popup位置
    popup.setPosition(undefined);
    //每次其他点击前，先关闭之前的弹框
    let new_value = {};
    Object.keys(feature.values_.values_).forEach((item) => {
      if (item !== "mpLayer" && item !== "ID" && item !== "URL") {
        new_value[item] = feature.values_.values_[item];
      }
    });
    event_value.value = new_value;
    if (popup.getPosition() == undefined) {
      //设置popup的位置
      let position = feature.getGeometry().getCoordinates()[0];
      popup.setPosition(position);
    }
  });
  // 关闭popup弹窗
  closer.onclick = function () {
    //未定义popup位置
    popup.setPosition(undefined);
    //失去焦点
    closer.blur();
    return false;
  };
});

let isShowSurveillance = false;
/* 点击header条"视频监控",弹出一个和监控相关的图标,再点击图标和弹窗消失 */
function videoSurveillance() {
  isShowSurveillance = !isShowSurveillance;
  if (isShowSurveillance) {
    $map.addLayer(highLightLayer);
    source.addFeatures(features);
  } else {
    $map.removeLayer(highLightLayer);
    popup.setPosition(undefined);
    source.clear();
    return false;
  }
}
</script>

<style lang="scss" scoped>
#jkpopup {
  position: absolute;
  background: #fff;
  border-radius: 10px;
  border-radius: 5px;
  width: 220px;
  height: 180px;
  z-index: 100;
  bottom: 2px;
  left: -60px;
  // 下方小三角
  &::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50px;
    width: 0;
    height: 0;
    border-left: 13px solid transparent;
    border-right: 13px solid transparent;
    border-top: 15px solid #fff;
  }

  h3 {
    // background: #2196f3;
    padding: 5px 10px;
    border-radius: 5px;
  }
  a {
    text-decoration: none;
    position: absolute;
    top: 5px;
    right: 5px;
  }
  p {
    margin-top: 5px;
    font-size: 14px;
    padding: 5px 10px;
  }
  video {
    width: 220px;
    border-radius: 15px;
    height: 100px;
    margin-top: 5px;
    padding: 5px 10px;
  }
}
</style>
